<template>
  <div class="tab_bar">
    <!--<div>-->
    <!--<mt-tab-container v-model="selected" :swipeable="true">-->
    <!--<mt-tab-container-item   v-for="item in tabbar" :key="item.id" :id="item.id">-->
    <!--<div >{{item.title}}</div>-->
    <!--</mt-tab-container-item>-->
    <!--</mt-tab-container>-->
    <!--</div>-->
    <mt-tabbar v-model="selectedTab" :fixed="true">
      <mt-tab-item @click.native="goMenu(item.id)" v-for="item in tabbar" :key="item.id" :id="item.id">
        <div class="tabbar_img">
          <img v-if="selectedTab === item.id" slot="icon" :src="item.imgActive">
          <img v-else slot="icon" :src="item.img">
          <div class="tabbar_title">{{item.title}}</div>
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {tabbar} from '../../assets/js/tabbar'
  import {Tabbar, TabItem} from 'mint-ui';

  Vue.component(Tabbar.name, Tabbar);
  Vue.component(TabItem.name, TabItem);
  export default {
    props: {
      selected:{
        type:String,
      }
    },
    name: 'TabBar',
    data() {
      return {
        // selected: 'Index',
        tabbar: tabbar
      }
    },
    methods: {

      //跳转别的菜单
      goMenu(id) {
        // this.selected = id;
        this.$router.push({name: id});
      }
      //获取菜单栏目

    },
    computed: {
      selectedTab :{
        get(){
          return this.selected
        },
        set(){

        }

      }
    },
    watch:{

    },
    mounted() {

    }
  }
</script>

<style scoped>
  .tab_bar .tabbar_img img {
    height: 15px;
    width: 15px;
  }

  .tab_bar .tabbar_img {

  }

  .tabbar_title {
    margin-top: 5px;
  }

  .tab_bar .mint-tabbar > .mint-tab-item {
    z-index: 99;
  }

  .tab_bar .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #eaeaea;
    color: #e6191e;
  }
</style>
